<template>

  <div id="Company_member">
    <span>
      <img src="../assets/enterprise.png" alt="" class="bread-icon">
    </span>
    <el-breadcrumb style="display:inline-block">
      <el-breadcrumb-item>
        <span style="font-size:20px;">企业用户</span>
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <span style="font-size:15px;line-height:20px;">查询</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
    <div class="content-wrap">
      <div class="topNav">
        <span class="navLeft">成员查询</span>
        <!-- <span class="navRight">
          <el-button size="small" @click="memberSearch" class="searchInput">搜索</el-button>
        </span>
        <span class="navMid">
          <img class="icon-search" src="../assets/search.png" alt="">
          <el-input v-model="searchData" size="small" placeholder="请输入内容"></el-input>
        </span> -->
      </div>
      <el-table :data="tableData" class="table-common" border>
        <el-table-column fixed prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="id" label="用户id">
        </el-table-column>
        <el-table-column prop="user_type" label="用户等级" :formatter="formatUsertype">
        </el-table-column>
        <el-table-column prop="enterprise" label="企业id">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button @click="showForm(scope.row)" type="info" plain size="mini">查看详情</el-button>
            <el-button @click="editForm(scope.row)" type="primary" plain size="mini">权限分配</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="查看成员" :visible.sync="dialogFormVisibleShow">
      <el-form :model="formData">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="formData.username" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="所属公司" :label-width="formLabelWidth">
          <el-input v-model="formData.enterprise" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
          <el-input v-model="formData.birthday" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input v-model="formData.gender" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机" :label-width="formLabelWidth">
          <el-input v-model="formData.mobile" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input v-model="formData.department" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="职务" :label-width="formLabelWidth">
          <el-input v-model="formData.job" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="formData.email" auto-complete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="用户类别" :label-width="formLabelWidth">
          <el-input v-model="formData.user_type" auto-complete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisibleShow = false">取 消</el-button> -->
        <el-button type="primary" @click="dialogFormVisibleShow = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="编辑成员" :visible.sync="changeFormVisibleShow">
      <el-form :model="changeForm" inline>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="changeForm.username" auto-complete="off" disabled style="width:220px"></el-input>
        </el-form-item>
        <el-form-item label="用户类别" :label-width="formLabelWidth">
          <el-tooltip class="item" effect="dark" content=" 管理员：查询、修改、分析 | 操作员：查询、修改 | 普通成员：查询" placement="bottom">
            <el-select v-model="changeForm.user_type" clearable placeholder="请选择" style="width:220px">
              <el-option :value="1" label="管理员">管理员</el-option>
              <el-option :value="2" label="操作员">操作员</el-option>
              <el-option :value="3" label="普通成员">普通成员</el-option>
            </el-select>
          </el-tooltip>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <!-- <el-button @click="dialogFormVisibleShow = false">取 消</el-button> -->
        <el-button type="primary" @click="memberUpdate">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  let formBack;
  export default {
    data() {
      return {
        searchData: '',
        adminId: '',
        adminToken: '',
        enterprise: '',
        dialogFormVisibleShow: false,
        changeFormVisibleShow: false,
        formLabelWidth: '150px',
        tableData: [{}],
        formData: {
          "code": "",
          "created_at": "",
          "drug": {
            "id": '',
            "created_at": "",
            "updated_at": "",
            "common_name": "",
            "approval_number": "",
            "approval_expiry_date": "",
            "expiry_date_number": '',
            "expiry_date_unit": "",
            "form": "",
            "standard": "",
            "factory": "",
            "enterprise": ''
          },

        },
        changeForm: {},
        formBack: {},
        // submitForm:{}
      }
    },
    methods: {
      // memberSearch() {
      //   if (this.searchData != '') {
      //     this.$http({
      //       url: '/users/' + this.searchData + '/',
      //       method: 'get',
      //       headers: {
      //         'Authorization': 'Token ' + this.adminToken
      //       },
      //     }).then(
      //       response => {
      //         this.tableData = []
      //         this.tableData.push(response.data)
      //       }
      //     ).catch(function (error) {
      //       this.$message({
      //         message: error.response.detail,
      //         type: 'warning'
      //       })
      //       if (error.response) {
      //         alert(error.response.data.detail)
      //       } else if (error.request) {
      //         console.log(error.request);
      //       } else {
      //         // Something happened in setting up the request that triggered an Error
      //         console.log('Error', error.message);
      //       }
      //       console.log(error);
      //     })
      //   } else {
      //     this.$http({
      //       url: '/enterprise/' + this.enterprise + '/members/',
      //       // url: '/drugs/'+adminId +'/',
      //       method: 'get',
      //       headers: {
      //         'Authorization': 'Token ' + this.adminToken
      //       },
      //     }).then(
      //       response => {
      //         //success
      //         console.log(response)
      //         this.tableData = response.data.results
      //       }
      //     ).catch(function (error) {
      //       this.$message({
      //         message: error.response.detail,
      //         type: 'warning'
      //       })
      //       if (error.response) {
      //         alert(error.response.data.detail)
      //       } else if (error.request) {
      //         console.log(error.request);
      //       } else {
      //         // Something happened in setting up the request that triggered an Error
      //         console.log('Error', error.message);
      //       }
      //       console.log(error);
      //     })
      //   }
      // }, 
      formatUsertype: function (row, column) {
        switch (row.user_type) {
          case 1:
            return '管理员';
            break;
          case 2:
            return '操作员';
            break;
          case 3:
            return '普通成员';
            break;
        }
      },
      handleClick(row) {
        this.dialogVisible = true
        console.log(row);
      },
      showForm(row) {
        console.log(row)
        this.dialogFormVisibleShow = true
        this.formData = row
      },
      editForm(row) {
        this.changeFormVisibleShow = true
        // formBack = row;
        this.changeForm = JSON.parse(JSON.stringify(row));
      },
      memberUpdate() {
        if (this.enterprise && this.adminToken) {
          this.$http({
            url: '/users/' + this.changeForm.id + '/user-type/',
            headers: {
              'Authorization': 'Token ' + this.adminToken
            },
            method: 'post',
            data: {
              user_type: this.changeForm.user_type
            }
          }).then(
            response => {
              this.changeFormVisibleShow = false
              this.$message({
                showClose: true,
                type: 'success',
                message: '更新成功'
              });

            }).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: '修改失败',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
        } else {
          this.$message({
            showClose: true,
            type: 'warning',
            message: '登陆已过期'
          });
        }
      }

    },
    mounted() {
      this.adminId = this.$store.getters.getInfo.id
      this.adminToken = this.$store.getters.getInfo.token
      this.enterprise = this.$store.getters.getInfo.enterprise
      if (this.enterprise && this.adminToken) {
        this.$http({
          url: '/enterprise/' + this.enterprise + '/members/',
          headers: {
            'Authorization': 'Token ' + this.adminToken
          },
          method: 'get',
          data: {
            page: 1,
            search: ''
          }
        }).then(
          response => {
            //success
            //   this.$message({
            //   message: '警告哦，这是一条警告消息',
            //   type: 'warning'
            // });
            console.log(response.data)
            this.tableData = response.data.results
          }
        ).catch(error => {
          console.log(error.response)
          if (error.response.status == 401) {
            this.$message({
              message: error.response.data.detail,
              type: 'warning'
            })
            this.$router.push({
              path: '/login'
            });
          } else if (error.response.status == 400) {
            this.$message({
              message: 'error400',
              type: 'error'
            })
          } else {
            this.$message({
              message: '未知错误',
              type: 'error'
            })
          }
          console.log(error);
        });
      } else {
        this.$message({
          showClose: true,
          type: 'warning',
          message: '登陆已过期'
        });
      }
    }
  }

</script>

<style scoped>
  #Company_member>>>.el-dialog {
    max-width: 600px;
    max-height: 700px;
    overflow: scroll;
  }

</style>
